import React, { useEffect, useState, setStatus } from 'react';
import { Table, Form, Select, Button, Typography, Slider, Flex, Input } from 'antd';
import { useTranslation } from 'react-i18next';
import { transformArray, calculatePercentage } from '../../utils/commonUtil';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import './index.scss';
import { min, values } from 'lodash';

const { Title } = Typography;
const VirtualSimulation = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [formIngredient] = Form.useForm();
  const [buList, setBuList] = useState([]);
  const [brandList, setBrandList] = useState([]);
  const [productList, setProductList] = useState([]);
  const [ingredientInitValues, setIngredientInitValues] = useState({
    formList: []
  });
  const [values, setValues] = useState([
    {
      parentName: 'Performance',
      name: 'Cleaning',
      min: 0,
      max: 100,
      unit: 'mg',
      value: 50,
    },
    {
      parentName: 'Performance',
      name: 'Foam',
      min: 100,
      max: 200,
      unit: 'g',
      value: 167,
    },
    {
      parentName: 'Performance',
      name: 'Color protection',
      min: 0,
      max: 200,
      unit: 'mg',
      value: 54,
    },
    {
      parentName: 'Stability',
      name: 'Cleaning',
      min: 350,
      max: 600,
      unit: 'g',
      value: 480,
    },
    {
      parentName: 'Stability',
      name: 'Foam',
      min: 0,
      max: 0.3,
      unit: 'mg',
      value: 0.2,
    }
  ]);

  const serach = () => {
    console.log(formIngredient?.getFieldsValue());
    queryList(1);
  };
  // 获取页面list数据
  const queryList = async (pagination, size) => {

  };
  // 调用下拉框api
  const apiSelectAsync = async () => {
    setProductList(transformArray([]));
    setBrandList(transformArray([]));
  };

  useEffect(() => {
    // 调用下拉框api
    apiSelectAsync();
  }, []);

  return (
    <>
      <div className='page-title-wrap'>
        <Flex align='center' justify='space-between'>
          <Title className='fontStyleH2' level={2} >{t('common.requestList')}</Title>
        </Flex>
      </div>
      <div className='page-content-wrap'>
        <Form form={form} className='filter-wrap'>
          <Flex align='center' gap="middle">
            <Form.Item name="buTypes"
              label={t('common.bu')} style={{ width: 160 }} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <Select mode="multiple" placeholder={t('common.pleaseSelect')} allowClear options={buList} />
            </Form.Item>
            <Form.Item name="brands"
              label={t('common.brand')} style={{ width: 160 }} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <Select mode="multiple" placeholder={t('common.pleaseSelect')} allowClear options={brandList} />
            </Form.Item>
            <Form.Item name="products"
              label={t('common.product')} style={{ width: 160 }} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <Select mode="multiple" placeholder={t('common.pleaseSelect')} allowClear options={productList} />
            </Form.Item>
            {/* <Button
              className='search-btn'
              type="primary"
              onClick={serach}
              icon={<SearchOutlined style={{ fontSize: 20 }} />}
            /> */}
          </Flex>
        </Form>
        <Flex className='virtual-content-wrap' gap={16}>
          <div className='left-info'>
            <Form form={formIngredient} initialValues={ingredientInitValues}>
              <Flex className='item-name' gap={16}>
                <div style={{ width: '220px' }}>{t('virtualSimulation.ingredient')}</div>
                <div style={{ width: '180px' }}>{t('virtualSimulation.concentration')}{t('unit.percentage')}</div>
              </Flex>
              <Form.List name="formList">
                {(fields, { add, remove }) => (
                  <>
                    {fields.map((field, index) => {
                      const fieldItem = form?.getFieldsValue()?.dynamicFields?.[index];
                      const fieldName = fieldItem?.fieldName;
                      const fieldOption = transformArray(fieldItem?.fieldValues);
                      return (
                        <Flex align='center' gap={16}>
                          <Form.Item name={[field.name, 'fieldName']}
                            label={fieldName} style={{ width: '220px' }}>
                            <Select mode="multiple" placeholder={t('common.pleaseSelect')} allowClear options={fieldOption} />
                          </Form.Item>
                          <Form.Item name={[field.name, 'fieldValue']}
                            label={fieldName} style={{ width: '180px' }}>
                            <Input />
                          </Form.Item>
                          <Button type='link' className='del-btn' onClick={() => { remove(field.name); }}>
                            <DeleteOutlined />
                          </Button>
                        </Flex>
                      )
                    })}
                    <Flex align='center' gap={16}>
                      <Button onClick={() => { add() }}>{t('common.add')}</Button>
                      <Button
                        className='search-btn'
                        type="primary"
                        onClick={serach}
                        icon={<SearchOutlined style={{ fontSize: 20 }} />}
                      />
                    </Flex>
                  </>
                )}
              </Form.List>
            </Form>
          </div>
          <div className='right-info'>
            {
              values?.map((item, index) => {
                const parentNameIndex = values?.findIndex(val => val?.parentName === item?.parentName);
                const percentageValue = calculatePercentage(item?.value, item?.min, item?.max);
                const percentageMarkLeft = calculatePercentage(item?.value, item?.min, item?.max) - 2;
                const percentageNumLeft = calculatePercentage(item?.value, item?.min, item?.max) - 10;
                return (
                  <div key={item?.parentName + item?.name}>
                    {
                      parentNameIndex === index &&
                      <div className='item-name' style={{ width: '140px' }}>{item?.parentName}</div>
                    }
                    <Flex align='center' gap={16} className='slider-item'>
                      <div className='slider-name'>{item?.name}</div>
                      <Flex align='center' className='slider-info'>
                        <div className='range-item left'>{item?.min}</div>
                        <div className='slider-bar'>
                          <div className='percentage-wrap' style={{ left: `${percentageNumLeft}%` }}>
                            <span className='num'>{item?.value}</span>
                            <span className='rate'>({percentageValue}%)</span>
                          </div>
                          <div className='percentage-mark' style={{ left: `${percentageMarkLeft}%` }}></div>
                          <div className='slider-bar-bg'>
                            <div className='percentage' style={{ width: `${percentageValue}%` }}></div>
                          </div>
                        </div>
                        <div className='range-item right'>
                          {item?.max}
                          <span className='unit'>({item?.unit})</span></div>
                      </Flex>
                    </Flex>
                  </div>
                )
              })
            }
          </div>
        </Flex>
      </div>
    </>
  )
};

export default VirtualSimulation;
